<template>
  <div>
    <van-button icon="arrow-left" to="/personal">返回</van-button>
    <!-- 登录 -->
    <h4 style="margin-left: 10px">欢迎登录</h4>
    <van-form>
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          @click="Login"
        >
          登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { Dialog } from "vant";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
  computed: {
    ...mapState({ userList: (state) => state.user.userInfo }),
  },
  methods: {
    Login() {
      //登录的时候首先获取用户信息,从用户信息中把token解构出来
      let { token } = this.userList;
      //然后把token存储到本地
      localStorage.setItem("TOKEN", token);
      //然后做路由跳转
      if (
        this.username != this.userList.username ||
        this.password != this.userList.password
      ) {
        Dialog({ message: "请输入正确的用户名或密码" });
      } else {
        this.$router.push("/home");
      }

      //然后在个人主页就可以判断有没有token来判断用户有没有登录,
      //以及能够通过这个信息来改变个人中心页面的头像/用户名等等
      //以下两个API是用来得到token和清除token的  想要做退出登录可以先路由跳转,然后清除token
      //清除token:localStorage.removeItem('TOKEN');
      //获取token:localStorage.getItem('TOKEN');
    },
  },
};
</script>

<style>
</style>